<template>
  <div class="container">
    <el-form label-position="left" ref="elForm" class="ml-3" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="HTTP端口">
        <input class="w-[202px]" type="number" v-model.number="form.httpPort">
      </el-form-item>
<!--      <el-form-item label="RTSP端口">-->
<!--        <input class="w-[202px]" type="number" v-model.number="form.rtspPort" >-->
<!--      </el-form-item>-->
<!--      <el-form-item label="应用监听端口">-->
<!--        <input class="w-[202px]" v-model.number="form.svrPort" type="number" >-->
<!--      </el-form-item>-->
<!--      <el-form-item label="服务端口">-->
<!--        <input class="w-[202px]" v-model="form.deviceModel" type="text" >-->
<!--      </el-form-item>-->
<!--      <el-form-item label="WebSocket端口">-->
<!--        <input class="w-[202px]" v-model="form.deviceModel" type="text" >-->
<!--      </el-form-item>-->

        <el-button class="!mt-8" type="primary" @click="save()" style="width: 120px; margin-left: 0px">保存</el-button>
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  import { get485,set485 } from "@/api/device/system";
  import {getNetconfig, getPortsconfig, postNetconfig, postPortsconfig} from "../../../api/api";
  import Post from "../../system/post/index.vue";
export default {
  name: 'index',
  data() {
    return {
      title: "",
      open: false,
      originalPort: '',
      ip: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
      },
      rules: {
      },
    }
  },
  created() {
    getPortsconfig().then(res =>{
      this.form = res.data;
      this.originalPort = res.data.httpPort;
    })
    getNetconfig().then(res =>{
      this.ip = res.data.ipAddress;
    })
  },
  methods: {
    isValidPort(port) {
      // 检查是否为空，因为 v-model.number 在输入为空时值是 ''
      if (port === '' || port === null) {
        return false;
      }
      // 确保是整数且在有效范围内
      return Number.isInteger(port) && port >= 1 && port <= 65535;
    },

    // --- 修改后的 save 方法 ---
    save(){
      // 1. 验证 HTTP 端口
      if (!this.isValidPort(this.form.httpPort)) {
        this.$message.error('HTTP端口必须是1到65535之间的整数');
        return; // 验证失败，中止执行
      }

      // 2. 验证 RTSP 端口
      // if (!this.isValidPort(this.form.rtspPort)) {
      //   this.$message.error('RTSP端口必须是1到65535之间的整数');
      //   return;
      // }

      // 3. 验证应用监听端口
      // if (!this.isValidPort(this.form.svrPort)) {
      //   this.$message.error('应用监听端口必须是1到65535之间的整数');
      //   return;
      // }
      const ipHasChanged = this.originalPort !== this.form.httpPort;

      if (ipHasChanged) {
        // 如果IP地址变更，执行“发送后不等返回，直接提示跳转”的逻辑
        // 立即弹出确认框
        this.$confirm('设备端口将变更。点击“确定”将修改端口并跳转到新地址。', '重要提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postPortsconfig(this.form);
          setTimeout(() => {
            window.location.href = `http://${this.ip}:${this.form.httpPort}`;
          }, 1000); // 延迟1000毫秒 (1秒)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消自动跳转。请稍后手动访问新IP地址。'
          });
        });

      } else {
        postPortsconfig(this.form).then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          // 成功后可以更新一下原始IP，以防用户连续点击保存
          this.originalPort = this.form.httpPort;
        }).catch(err => {
          this.$message.error('保存失败');
        });
      }
    }
  },
  computed: {
    enableValue: {
      get() {
        return String(this.form.enable);  // Convert to string for comparison
      },
      set(value) {
        this.form.enable = Number(value); // Convert back to number for data
      }
    }
  },
}
</script>

<style scoped>
.container {
}
.button {
  margin-top: 5%;
}
select {
  width: 202px;
}
</style>
